<!-- 自定义表格列弹框控件 -->
<template>
  <BaseModal ref="baseModalRef" width="70%" @on-modal-ok="onModalOk" @on-modal-cancel="onModalCancel">
    <template #titleArea>选择表头显示内容</template>
    <template #contentArea>
      <div class="column-content-view flex-between">
        <!-- 左侧内容 -->
        <div class="column-content-left flex1">
          <p class="hd">
            <span class="title-view">可选属性</span>
            <span class="num-view">（共 {{ columnsCount }} 个）</span>
          </p>
          <div class="column-view" style="padding: 0">
            <a-collapse v-model:activeKey="customAttrsData.activeKey" ghost>
              <a-collapse-panel key="customAttrs" header="项目自定义属性">
                <div class="allCheckBtn">
                  <a-checkbox v-model:checked="customAttrsData.checkAll" :indeterminate="customAttrsData.indeterminate" @change="onCustomCheckAllChange"> 全选 </a-checkbox>
                </div>
                <!-- 项目自定义属性 -->
                <a-checkbox-group v-model:value="customAttrsData.checkedList" :options="customAttrsData.customAttrsOptions" />
              </a-collapse-panel>
            </a-collapse>
            <p class="line-view"></p>
            <a-collapse v-model:activeKey="systemAttrsData.activeKey" ghost>
              <a-collapse-panel key="systemAttrs" header="项目系统属性">
                <div class="allCheckBtn">
                  <a-checkbox v-model:checked="systemAttrsData.checkAll" :indeterminate="systemAttrsData.indeterminate" @change="onSystemCheckAllChange"> 全选 </a-checkbox>
                </div>
                <!-- 项目系统属性 -->
                <a-checkbox-group v-model:value="systemAttrsData.checkedList" :options="systemAttrsData.systemAttrsOptions" />
              </a-collapse-panel>
            </a-collapse>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="column-content-right">
          <p class="hd">
            <span class="title-view">已选属性</span>
            <span class="num-view">（共 {{ selectColumnsObj.checkColumnsAry && selectColumnsObj.checkColumnsAry.length }} 个）</span>
          </p>
          <div class="column-content-right-view column-view">
            <div>
              <a-input-search v-model:value="selectColumnsObj.searchValue" placeholder="搜索已选属性" style="width: 200px" @change="onInputSearch" />
            </div>
            <div class="column-right-view">
              <!-- 每个column -->
              <draggable v-model="selectColumnsObj.checkColumnsAry" group="people" item-key="id" animation="600">
                <template #item="{ element, index }">
                  <div class="column-item flex-between">
                    <div class="drag-view">
                      <small-dash-outlined />
                      <small-dash-outlined />
                    </div>
                    <p class="column-title">
                      <span>{{ element.label }}</span>
                    </p>
                    <div class="sort-view">
                      <template v-if="index != 0">
                        <a-tooltip placement="top">
                          <template #title>
                            <span>置顶</span>
                          </template>
                          <span>
                            <vertical-align-top-outlined @click.stop="onTop(element, index)" />
                          </span>
                        </a-tooltip>
                      </template>

                      <template v-if="!element.disabled">
                        <a-tooltip placement="top">
                          <template #title>
                            <span>移除</span>
                          </template>
                          <span @click.stop="onRemove(index)">
                            <close-outlined />
                          </span>
                        </a-tooltip>
                      </template>
                      <template v-else>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      </template>
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template #footerArea>
      <a-button @click.stop="onSetDefault">恢复默认值</a-button>
    </template>
  </BaseModal>
</template>
<script setup lang="ts">
import BaseModal from "@/components/Basics/BaseModal.vue"
import draggable from "vuedraggable"
interface ICheckItem {
  label: string //列名称
  value: string //列key值
  disabled?: boolean //是否可点击
  width?: number //列宽度
  align?: string //对齐方式
  isChecked: boolean //是否选择
}

interface Props {
  customColumns?: ICheckItem[] //自定义属性
  systemColumns?: ICheckItem[] //系统属性
}
const props = withDefaults(defineProps<Props>(), {
  customColumns: () => [],
  systemColumns: () => [],
})
const emits = defineEmits<{
  (e: "on-column-change", columnsAry: ICheckItem[]): void
}>()

const baseModalRef = shallowRef()

//项目自定义属性数据
const customAttrsData = reactive({
  activeKey: "customAttrs",
  indeterminate: false,
  checkAll: false,
  checkedList: [],
  customAttrsOptions: [
    { label: "自定义属性1", value: "attr1" },
    { label: "自定义属性2", value: "attr2" },
  ],
})

//项目系统属性属性数据
const systemAttrsData = reactive({
  activeKey: "systemAttrs",
  indeterminate: false,
  checkAll: false,
  checkedList: [],
  systemAttrsOptions: [
    { label: "项目名称", value: "projectName", disabled: true },
    { label: "项目状态", value: "status" },
    { label: "项目负责人", value: "person" },
  ],
})

//已经选择的表格列数组
const selectColumnsObj = reactive({
  checkColumnsAry: [],
  searchValue: "",
})

//自定义属性选择控制全选按钮
watch(
  () => customAttrsData.checkedList,
  val => {
    customAttrsData.indeterminate = !!val.length && val.length < customAttrsData.customAttrsOptions.length
    customAttrsData.checkAll = val.length === customAttrsData.customAttrsOptions.length
    setUpateCheckColumns()
  },
)

//项目属性选择控制全选按钮
watch(
  () => systemAttrsData.checkedList,
  val => {
    systemAttrsData.indeterminate = !!val.length && val.length < systemAttrsData.systemAttrsOptions.length
    systemAttrsData.checkAll = val.length === systemAttrsData.systemAttrsOptions.length
    setUpateCheckColumns()
  },
)

//可选属性列总个数
const columnsCount = computed(() => {
  return customAttrsData.customAttrsOptions.length + systemAttrsData.systemAttrsOptions.length
})

//自定义属性全选/非全选
const onCustomCheckAllChange = (e: any) => {
  if (e.target.checked) {
    customAttrsData.customAttrsOptions.forEach((v: ICheckItem): void => {
      customAttrsData.checkedList.push(v.value)
    })
  } else {
    customAttrsData.checkedList = []
    customAttrsData.indeterminate = false
  }
  setUpateCheckColumns()
}

//项目属性全选/非全选
const onSystemCheckAllChange = (e: any) => {
  if (e.target.checked) {
    systemAttrsData.systemAttrsOptions.forEach((v: ICheckItem): void => {
      systemAttrsData.checkedList.push(v.value)
    })
  } else {
    systemAttrsData.checkedList = []
    systemAttrsData.indeterminate = false
  }
  setUpateCheckColumns()
}

//右侧已选表格列查询
const onInputSearch = (): void => {
  const val = selectColumnsObj.searchValue
  setUpateCheckColumns()
  selectColumnsObj.checkColumnsAry = selectColumnsObj.checkColumnsAry.filter((v: ICheckItem) => {
    return v.label.includes(val)
  })
}

//更新选择的列
const setUpateCheckColumns = (): void => {
  selectColumnsObj.checkColumnsAry = []
  const customList = customAttrsData.checkedList
  const systemlist = systemAttrsData.checkedList
  customAttrsData.customAttrsOptions.forEach(v => {
    if (customList.includes(v.value)) selectColumnsObj.checkColumnsAry.push(v)
  })

  systemAttrsData.systemAttrsOptions.forEach(v => {
    if (systemlist.includes(v.value)) selectColumnsObj.checkColumnsAry.push(v)
  })
}

//右侧已选属性 置顶 功能
const onTop = (item: ICheckItem, i: number): void => {
  selectColumnsObj.checkColumnsAry.splice(i, 1)
  selectColumnsObj.checkColumnsAry.unshift(item)
}

//右侧已选属性 删除 功能
const onRemove = (i: number): void => {
  selectColumnsObj.checkColumnsAry.value.splice(i, 1)
}

//选择列完毕，传递给父组件数据
const onModalOk = (): void => {
  console.log(selectColumnsObj.checkColumnsAry)

  emits("on-column-change", selectColumnsObj.checkColumnsAry)
}

//取消按钮，关闭弹框
const onModalCancel = () => {
  baseModalRef.value.setCloes()
}

//恢复默认值
const onSetDefault = (): void => {
  console.log("onSetDefault")
}

//打开弹框
const setOpen = () => {
  baseModalRef.value.setOpen()
}

defineExpose({
  setOpen,
  onModalCancel,
})
</script>

<style lang="less" scoped>
.column-content-view {
  align-items: flex-start;
  padding: 20px;
  .title-view {
    font-size: 15px;
    color: #303030;
    font-weight: 500;
  }
  .num-view {
    font-size: 12px;
    color: #909090;
    margin: 0 5px;
  }
  .column-view {
    padding: 10px;
    border: 1px solid #e8e8e8;
  }
  .hd {
    margin-bottom: 10px;
  }
  .line-view {
    height: 1px;
    background-color: #e8e8e8;
  }
  .allCheckBtn {
    margin-bottom: 8px;
  }

  margin-bottom: 10px;
  :deep(.ant-collapse) {
    .ant-collapse-header {
      &:hover {
        color: #338fe5;
      }
    }
    .ant-collapse-content-box {
      padding: 0 40px 16px;
    }
  }
  //左侧框
  .column-content-left {
    margin-right: 15px;
  }
  //右侧已选择列框
  .column-content-right {
    flex-basis: 340px;
    :deep(.ant-input-group-wrapper) {
      width: 100% !important;
    }
    .column-item {
      height: 40px;
      cursor: move;
      .drag-view {
        flex-basis: 20px;
        :deep(.anticon) {
          width: 3px;
          font-size: 15px;
          transform: rotate(90deg) translateX(-4px);
        }
      }
      .column-title {
        height: 100%;
        flex: 1;
        text-align: left;
        line-height: 45px;
      }
      .sort-view {
        height: 100%;
        text-align: right;
        flex-basis: 60px;
        line-height: 45px;
        :deep(.anticon) {
          margin: 0 4px;
          font-weight: bold;
          // cursor: pointer;
          &:first-child {
            &:hover {
              color: #24b47e;
            }
          }
          &:last-child {
            &:hover {
              color: #f12220;
            }
          }
        }
      }
    }
  }
}
</style>
